<template>
  <div class="main-container">
    <div class="data-show">
      <div class="data-actions">
        <h3>模块参数配置</h3>
      </div>
      <div class="data-table">
        <el-form ref="test">
        <el-row :gutter="20">
          <el-col v-for="(item, index) in parameters" :key="index" :span="getParameterSpan" style="margin: 0 auto;">
            <div class="common-item">
              <label class="condition-label">{{ item.parameterCode }}</label>
              <el-form-item class="condition-input" :prop="item.parameterCode">
                <el-input-number v-if="item.parameterType === 1" type="number" :min="item.min ? item.min : 0" :max="item.max ? item.max : 0" placeholder="请输入参数数值" v-model.number="item.default" />
                <el-select v-else v-model="item.default" clearable placeholder="请选择参数值">
                  <el-option v-for="(it, ind) in item.options" :key="ind" :label="it" :value="it" />
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup>
import {ref, computed, watch } from 'vue';
import * as api from '@/api/user'

const getParameterSpan = computed(() => {
  let parameterCount = parameters.value.length;
  let span = 24;
  if (parameterCount === 1){
    span = 16;
  } else if (parameterCount % 2 === 0){
    span = 12;
  } else {
    span = 8;
  }
  return span;
});
const selectObj = {
  parameterType: 0,
  parameterCode: 'key',
  options: [1, 2, 3, 4],
  default: 3
};

const numObj = {
  parameterType: 1,
  parameterCode: 'key1',
  max: 10, 
  min: 1,
  default: 2
}

const parameters = ref([selectObj,selectObj,selectObj]);




</script>
<style lang='scss' scoped>

</style>